<!--
 * @Description: 
 * @Author: 赵华宇
 * @Date: 2024-11-14 11:17:17
 * @LastEditors: 赵华宇
 * @LastEditTime: 2024-11-14 15:55:26
-->
<template>
  <div class="bg" v-loading="loading">
    <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>

  <div class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </div>

  <div class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </div>

  <div>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </div>
    <button>按钮</button>
    <el-button>按钮</el-button>
    <!-- 注册组件 -->
    <Reg v-if="flag" @my-alert="myAlert" />
    <!-- 登录 -->
    <login v-if="!flag" />
    <p v-if="flag" @click="changeFlag">已有账号，直接<a href="">登录</a></p>
    <p v-if="!flag" @click="changeFlag">没有账号，立即<a href="">注册</a></p>

    <button @click="changeFlag">{{ flag ? '去登录页面' : '去注册页面' }}</button>
    <!-- 按钮的样式 -->
    <!-- type、plain、round 和 circle -->
    <!-- 写一个主要按钮 -->
    <el-button type="primary" :disabled="flag" plain round>主要按钮</el-button>
    <el-button type="primary" :loading="loading" @click="toLogin">登录</el-button>
    <br>
    <el-checkbox v-model="checked1" label="Option 1" size="large" />
    <el-checkbox v-model="checked2" label="Option 2" size="large" disabled />
    <!-- <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="name" label="名字" width="180" />
      <el-table-column prop="address" label="地址" />
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleClick(scope.row)">
            Detail
          </el-button>
          <el-button link type="primary" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table> -->
    <br><br>
    <el-table :data="tableData1" border style="width:100%">
      <el-table-column prop="number" label="学号" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="grade" label="分数" width="180" />
      <el-table-column prop="remark" label="评语"  />
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default="scope">
          <!-- 添加删除按钮 -->
           <el-button link type="primary" size="small" @click="handleDe(scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Reg from './views/Reg.vue';
import Login from '@/views/Login.vue';
// flag 为 true 显示注册页面
// flag 为 false 显示登录页面
const flag = ref(true);
const loading = ref(false);
const checked1 = ref(true);
const checked2 = ref(true);
// const tableData = ref([
//   {
//     date: '2016-05-03',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     date: '2016-05-02',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
// ]);
const tableData1 = ref([
  {
    number: '001',
    name: '张三',
    grade: 90,
    remark: '优秀',
  },
  {
    number: '002',
    name: '李四',
    grade: 92,
    remark: '很优秀',
  },
  {
    number: '003',
    name: '王五',
    grade: 83,
    remark: '很努力，不错',
  },
  {
    number: '004',
    name: '赵六',
    grade: 98,
    remark: '666',
  }
]);
// 切换登录注册页面
function changeFlag () {
  flag.value = !flag.value;
}
// 父组件中声明的事件
function myAlert () {
  alert('我是父组件中的事件-myAlert');
}
// 登录
function toLogin () {
  loading.value = true;
  // 模拟登录请求
  setTimeout(() => {
    alert('登录成功');
    loading.value = false;
  }, 3000);
}
// const handleClick = (row) => {
//   console.log('🤡 CC - handleClick - row:', row);
//   console.log('🤡 CC - handleClick - row.name:', row.name);
// }
const handleDe=(row)=>{
  tableData1.value = tableData1.value.filter(item => item !== row);
  alert('确定删除当前行');
}
</script>
<style scoped>
</style>